<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="include/base.jsp" %>

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>凯盛项目管理系统</title>
	<link rel="stylesheet" href="css/jquery.atwho.css" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
	<style type="text/css"><!--
		.container .row ul li .link{
			padding: 0px;
			margin: 0px;
			display: inline;
			color: #fff;
		}
		.container .row ul li .link:hover{
			text-decoration: none;
			color: #fff;
			background-color: #0068CD;
		}
		.container .row .span3 .box ul li a:hover{
			color: #0088CC;
		}
		.right{
			margin-bottom: 10px;
		}
	</style>
</head>
<body class="body" style="background:url(img/1.jpg) repeat 0px 0px">
	
	<!--top-->
	<%@ include file="include/top.jsp" %>
	
	
	<div class="container" style="font-size:14px">
	  <div class="row">
		<div class="span3">
			
			<!--left-->
			
			<%@ include file="include/left.jsp" %>
			
		</div>
		<div class="span6">
		  	<ul class="nav nav-pills nav-stacked" style="background-color:#0068CD;margin:0px;padding:5px 0px;border-radius:10px 10px 0px 0px">
			  <li class="nav-header" style="font-size:14px;"><i class="icon-th"></i><span style="color:fff;"><a href="javascript:;" class="link">你在想什么？</a></span></li>
			</ul>
			<div class="wall">
				<form style="margin:0px">
					<textarea name="" id="content" style="width:415px" rows="3"></textarea>
					<button type="button" class="btn btn-primary" id="publish">发布</button>
				</form>
			</div>

			<ul class="nav nav-pills nav-stacked" style="background-color:#0068CD;margin:10px 0px 0px 0px;padding:5px 0px;border-radius:10px 10px 0px 0px">
			  <li class="nav-header" style="font-size:14px"><i class="icon-th"></i><a href="javascript:;" class="link">信息流</a></li>
			</ul>
			<div class="wall"><!-- 动态 -->
				<div id="showCount" style="display:none;" class="alert alert-info"><!-- 显示有几条新动态 -->
				  <!-- <button type="button" class="close" data-dismiss="alert">×</button> -->
				  <a id="looknew" href="javascript:;" style="font-size:13px">有 <span id="count"></span>条新动态，点击查看</a>
				</div>
				<div id="dongTai">
				   <c:forEach var="msg" items="${requestScope.msglist}">
					 <div class="media clearfix" style="margin-bottom:10px">
						<a class="pull-left" href="javascript:;">
						   <img class="media-object" src="${msg.emppic}" style="width:64px;height:64px">
						</a>
						<div class="media-body">
						   <h4 class="media-heading">${msg.empname}</h4>
							${msg.content}
							<div class="muted" style="font-size:10px">${msg.createtime}</div>
						</div>
					</div> 
				   </c:forEach>
				   <input type="hidden" value="${requestScope.lastTime}" id="lastTime">
				</div>
				<%--返回 --%>
				<div>
	              <a class="btn pull-right" style="margin:0px 20px 0px 0px" href="main.jspx" type="button" id="back">返回</a>
	              <div style="clear:both"></div>
	            </div>
			</div>

			
		</div>
		<div class="span3">
			<div class="right">
				<ul class="nav nav-pills nav-stacked" style="background-color:#0068CD;margin:0px;padding:5px 0px;border-radius:10px 10px 0px 0px">
					  <li class="nav-header" style="font-size:14px"><a href="javascript:;" class="link">我的任务</a></li>
				</ul>
				<div class="box">
					<!-- <div class="head">我的任务</div> -->
					<ul>
						<c:forEach items="${requestScope.tasks}" var="task">
							<li><a href="showtask.jspx?id=${task.id}">${task.name}</a></li>
						</c:forEach>
					</ul>
				</div>
			</div>
			<div class="right">
				<ul class="nav nav-pills nav-stacked" style="background-color:#0068CD;margin:0px;padding:5px 0px;border-radius:10px 10px 0px 0px">
					  <li class="nav-header" style="font-size:14px"><a href="javascript:;" class="link">和我有关</a></li>
				</ul>
				<div class="box">
					<!-- <div class="head">我的任务</div> -->
					<ul>
						<li>
							<a href="looknewAt.jspx">@我的
								<span id="atCount" style="display:none" class="badge badge-warning">${requestScope.atCount}</span>
							</a>
						</li>
					</ul>
				</div>
		  	</div> 	
		</div>
	  </div>
	</div>
	
	<script type="text/template" id="templateContent">
		<div class="media clearfix" style="margin-bottom:10px">
			<a class="pull-left" href="javascript:;">
			   <img class="media-object" src={{pic}} style="width:64px;height:64px">
			</a>
			<div class="media-body">
			   <h4 class="media-heading">{{name}}</h4>
				{{content}}
				<div class="muted" style="font-size:10px">{{createtime}}</div>
			</div>
		</div>
	</script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.atwho.min.js"></script>
	<script type="text/javascript" src="js/at.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//使用At.js
			//接受参数，做不出来，∵javascript是异步的
			/* var names=new Array();//数组
			$.get("atNames.jspx",function(json){
				names=json;
			}); */
			
			 var names=["李四","rose","tom","张三"];
			$('textarea').atwho('@', {
			    data: names
			}).atwho(':', {
			    data: ""  //去掉冒号的效果
			}); 

			var dongTai=$("#dongTai").html();
			var templateContent=$("#templateContent").html();
			//发布新动态
			$("#publish").click(function(){
				var content=$("#content").val();
				$("#content").val("");//输入框清空
				//content=encodeURIComponent(content);使用jquery时，不要这一步
				$.get("message.jspx?xxx="+new Date().getTime(),{content:content},function(data){
					//接收XML返回的内容
					/*var username=$(data).find("employee").find("username").text();
					var pic=$(data).find("employee").find("pic").text();
					var createtime=$(data).find("message").find("createtime").text();*/
					
					//接受JSON返回的内容
					var username=data.empname;
					var pic=data.emppic;
					var createtime=data.createtime;

					//使新添加的动态显示在上边
					var htmlValue=templateContent.replace(/{{pic}}/g,pic).replace(/{{name}}/g,username).replace(/{{content}}/g,content).replace(/{{createtime}}/g,createtime)+$("#dongTai").html();
					$("#dongTai").html(htmlValue);					
				});
			});
			
			
			//及时显示有几条新信息未读
			/* window.onload(function(){
			}); */
			var lastTime=$("#lastTime").val();
			function check(){
				$.get("check.jspx",{lastTime:lastTime},function(data){
					if(data>0){
						$("#showCount").show();				
						$("#count").html(data);
					}
				});
				window.setTimeout(check,10000);
			}
			check();
			
			
			//点击提示，查看新信息
			$("#looknew").click(function(){
				$.getJSON("looknew.jspx",{lastTime:lastTime},function(data){//经试验，此时必须用getJSON
					$("#showCount").hide();	
					var username;
					var pic;
					var content;
					var createtime="";
					$(data).each(function(){
						//接受JSON返回的内容
						username=this.empname;
						pic=this.emppic;
						content=this.content;//从database中来
						createtime=this.createtime;
						//使新添加的动态显示在上边
						var htmlValue=templateContent.replace(/{{pic}}/g,pic).replace(/{{name}}/g,username).replace(/{{content}}/g,content).replace(/{{createtime}}/g,createtime)+dongTai;
						//alert(dongTai);
						//alert(htmlValue);
						dongTai=htmlValue;
						$("#dongTai").html(htmlValue);	
					});
					//循环完之后，最后一条动态的createtime做为再次执行check函数的lastTime
					lastTime=createtime;
				});
			});
			
			//及时显示有几条未读的  @我
			function checkAt(){
				$.get("checkAt.jspx",function(data){
					//alert(data);
					if(data>0){
						//alert(data);
						$("#atCount").show();				
						$("#atCount").html(data);
					}
				});
				window.setTimeout(checkAt,10000);
			}
			checkAt();

		});
	</script>
</body>
</html>